<template>
  <view class="user pageBg" style="padding-top: 100rpx">
    <!-- 用户信息头部 -->
    <view class="user-header">
      <view class="profile-section">
        <image
          class="imgtou"
          src="https://www.pengfei.site:8443/image/touxiangkuang.gif"
          mode="aspectFill"
        ></image>
        <view class="avatar">
          <image
            src="https://www.pengfei.site:8443/image/Chi.gif"
            mode="aspectFill"
            class="avatar-img"
          ></image>
        </view>
        <view class="user-info">
          <view class="name" @click="goback()"
            >名称：{{ userStore.username || "未登录点击进行登入" }}</view
          >
          <view class="department">Welcome to use. Good luck.</view>
        </view>
        <image
          class="img"
          src="https://www.pengfei.site:8443/image/Goma.gif"
          mode="aspectFill"
        ></image>
        <image
          class="img2"
          src="https://www.pengfei.site:8443/image/MuYvShu.gif"
          mode="aspectFill"
        ></image>
      </view>
    </view>

    <!-- 功能模块区域 -->
    <view class="function-modules">
      <view class="module-grid">
        <!-- 办公电话 -->
        <view
          class="module-item slide-left"
          :class="{ animate: showAnimation }"
          @click="handleOfficePhone"
          style="background-color: #95e1d3"
        >
          <view class="module-icon">
            <text class="icon">✏️</text>
          </view>
          <view class="module-title">填写记录</view>
          <view class="module-subtitle">所有填写记录</view>
        </view>

        <!-- 薪火相传 -->
        <view
          class="module-item slide-right"
          :class="{ animate: showAnimation }"
          @click="handleHeritage"
          style="background-color: #fc9d9a"
        >
          <view class="module-icon">
            <text class="icon">🔥</text>
          </view>
          <view class="module-title">成员名单</view>
          <view class="module-subtitle">团队历届成员</view>
        </view>

        <!-- 关于我们 -->
        <view
          class="module-item slide-left"
          :class="{ animate: showAnimation }"
          @click="handleAbout"
          style="background-color: #f9cdad"
        >
          <view class="module-icon">
            <text class="icon">📕</text>
          </view>
          <view class="module-title">一键速填</view>
          <view class="module-subtitle">快速填写内容</view>
        </view>

        <!-- 更多设置 -->
        <view
          class="module-item slide-right"
          :class="{ animate: showAnimation }"
          @click="handleMoreSettings"
          style="background-color: #c8c8a9"
        >
          <view class="module-icon">
            <text class="icon">⚙️</text>
          </view>
          <view class="module-title">更多设置</view>
          <view class="module-subtitle">更多相关功能</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onPageHide, onPageShow } from "@dcloudio/uni-app";
import { ref, onMounted } from "vue";
import { useUserStore } from "@/stores/user";

// 用户store
const userStore = useUserStore();

// 系统信息相关
const statusBarHeight = ref(0);

// 动画控制
const showAnimation = ref(false);

const goback = () => {
  if (!userStore.username) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
  } else {
    console.log("已登录，无需跳转");
  }
};

// 处理办公电话点击
const handleOfficePhone = () => {
  uni.navigateTo({
    url: "/pages/gengduo/components/tianxieList/tianxieList",
  });
};

// 处理薪火相传点击
const handleHeritage = () => {
  uni.navigateTo({
    url: "/pages/user/components/chengyaunList",
  });
};

// 处理关于我们点击
const handleAbout = () => {
  uni.showToast({
    title: "还未完成，请等待！",
    icon: "none",
  });
};

// 处理更多设置点击
const handleMoreSettings = () => {
  uni.navigateTo({
    url: "/pages/user/components/shizhi",
  });
};

onPageShow(() => {
  showAnimation.value = true;
});
onPageHide(() => {
  showAnimation.value = false;
});
</script>

<style lang="scss" scoped>
.img {
  position: fixed;
  bottom: 0rpx;
  right: 0;
  height: 300rpx;
  width: 300rpx;
}

.img2 {
  position: fixed;
  bottom: 0rpx;
  left: 0;
  height: 350rpx;
  width: 350rpx;
}

.imgtou {
  position: absolute;
  left: 0;
  z-index: 999;
  height: 250rpx;
  width: 250rpx;
}

.user {
  padding: 0;
}

.user-header {
  padding: 30rpx;
  color: black;
}

.profile-section {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 180rpx;
  height: 180rpx;
  border-radius: 90rpx;
  overflow: hidden;
  margin-right: 30rpx;
  background-color: #fff;
  border: 0.5px solid #f7f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.user-info {
  flex: 1;
  margin-left: 20rpx;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.department {
  font-size: 30rpx;
}

.function-modules {
  padding: 30rpx;
}

.module-grid {
  border-top: 2px dashed gray;
  padding-top: 50rpx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30rpx;
}

.module-item {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.7) 100%
  );
  backdrop-filter: blur(10rpx);
  border-radius: 24rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  padding: 30rpx 20rpx;
  text-align: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15), 0 2rpx 8rpx rgba(0, 0, 0, 0.1),
    inset 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  opacity: 0;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%,
      rgba(255, 255, 255, 0.1) 100%
    );
    pointer-events: none;
  }

  &:hover {
    transform: translateY(-4rpx) scale(1.02);
    box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.2),
      0 4rpx 12rpx rgba(0, 0, 0, 0.15),
      inset 0 1rpx 2rpx rgba(255, 255, 255, 0.9);
  }
}

.module-item:active {
  transform: translateY(2rpx) scale(0.96);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

/* 从左向右滑入的动画 */
.slide-left {
  transform: translateX(-100%);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-left.animate {
  transform: translateX(0);
  opacity: 1;
}

/* 从右向左滑入的动画 */
.slide-right {
  transform: translateX(100%);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-right.animate {
  transform: translateX(0);
  opacity: 1;
}

.module-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  margin: 0 auto 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(0, 180, 216, 0.1) 0%,
    rgba(0, 212, 170, 0.1) 100%
  );
  box-shadow: 0 4rpx 16rpx rgba(0, 180, 216, 0.2),
    inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5);
  border: 1rpx solid rgba(0, 180, 216, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover {
    transform: scale(1.1);
    box-shadow: 0 6rpx 20rpx rgba(0, 180, 216, 0.3),
      inset 0 1rpx 2rpx rgba(255, 255, 255, 0.7);

    &::before {
      opacity: 1;
    }
  }
}

.module-icon .icon {
  font-size: 50rpx;
  filter: drop-shadow(0 2rpx 4rpx rgba(0, 180, 216, 0.3));
  transition: all 0.3s ease;
  animation: iconPulse 3s ease-in-out infinite;

  &:hover {
    transform: scale(1.1);
    animation-play-state: paused;
  }
}

.module-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8rpx;
  text-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1);
  letter-spacing: 1rpx;
  position: relative;
}

.module-subtitle {
  font-size: 22rpx;
  color: #666;
  line-height: 1.3;
  opacity: 0.8;
  transition: all 0.3s ease;
}

/* 艺术字动画效果 */
@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes shimmer {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes iconPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
</style>
